{{ template "layout/base.html" . }}

{{define "head"}}
<title>OpenVPN管理后台</title>
{{end}}

{{define "body"}}

  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-green">
          <i class="ion ion-network"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">
            客户端连接数量: <span class="info-box-number2">{{ .ovStats.NClients }}</span>
          </span>
          <span class="info-box-text">
            下行流量: <span class="info-box-number2">{{ printSize .ovStats.BytesIn }}</span>
          </span>
          <span class="info-box-text">
            上行流量: <span class="info-box-number2">{{ printSize .ovStats.BytesOut }}</span>
          </span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-aqua">
          <i class="ion ion-ios-pulse"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">平均负载:</span>
          <span class="info-box-number">
            {{ .sysInfo.LoadAvg.One }},
            {{ .sysInfo.LoadAvg.Five }},
            {{ .sysInfo.LoadAvg.Fifteen }}<br/>
            </span>
          <span class="info-box-text">
            CPU数量: <span class="info-box-number2">
              {{ .sysInfo.CPUList.List | len }}
            </span>
          </span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <!-- fix for small devices only -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-orange">
          <i class="ion ion-arrow-graph-up-right"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">系统运行时长:</span>
          <span class="info-box-number">{{ .sysInfo.UptimeS }}</span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-yellow">
          <i class="fa ion-ios-clock-outline"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">
            当前时间:
          </span>
          <span class="info-box-number">
              {{ dateformat .sysInfo.CurrentTime "2006-01-02 15:04:05"}}
          </span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->


  </div>
<!-- /.row -->

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">内存使用情况</h3>
  </div>
  <div class="box-body">
    <div class="col-md-6">
      <div class="progress-group">
        <span class="progress-text">内存</span>
        <span class="progress-number">
          <b>{{ printmb .sysInfo.Memory.Used }}</b>
          /
          {{ printmb .sysInfo.Memory.Total }} MB
          - {{percent .sysInfo.Memory.Used .sysInfo.Memory.Total}}%
        </span>
        <div class="progress sm">
          <div class="progress-bar progress-bar-aqua"
            style="width: {{percent .sysInfo.Memory.Used .sysInfo.Memory.Total}}%"></div>
        </div>
      </div>
    </div>
    <!-- /.col -->
    <div class="col-md-6">
      <div class="progress-group">
        <span class="progress-text">交换区</span>
        <span class="progress-number">
          <b>{{ printmb .sysInfo.Swap.Used }}</b>
          / {{ printmb .sysInfo.Swap.Total }} MB
          - {{percent .sysInfo.Swap.Used .sysInfo.Swap.Total}}%
        </span>

        <div class="progress sm">
          <div class="progress-bar progress-bar-red"
            style="width: {{percent .sysInfo.Swap.Used .sysInfo.Swap.Total}}%"></div>
        </div>
      </div>
    </div>
    <!-- /.col -->  </div>
  <!-- /.box-body -->
</div>

<div class="row">
  <div class="col-md-12">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">连接的客户</h3>

      </div>
      <!-- /.box-header -->

      <div class="box-body">
        {{if .ovStatus}}
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover table-condensed table-responsive tablesorter tablesorter-bootstrap">
            <thead>
              <tr>
                <th>用户名</th>
                <th>真实IP</th>
                <th>用户位置</th>
                <th>虚拟IP</th>
                <th>收到数据</th>
                <th>发送数据</th>
                <th>连接时间</th>
                <th>在线时长</th>
                <th>强制退出</th>
              </tr>
            </thead>
            <tbody>
            {{if .ovStatus.ClientList}}
              {{range .ovStatus.ClientList}}
                <tr>
                    <td>{{.CommonName}}</td>
                    <td><span class="label label-success">{{.RealAddress}}</span></td>
                    <td><span class="label label-success">{{.ClientAddress}}</span></td>
                    <td>
                      <span class="label label-success">{{.VirtualAddress}}</span>
                    </td>
                    <td>{{.BytesReceived}}({{printSize .BytesReceived}})</td>
                    <td>{{.BytesSent}}({{printSize .BytesSent}})</td>
                    <td>{{.ConnectedSince}}</td>
                    <td>{{.TimeOnline}}</td>
                    <td>
                      <a href="javascript:$.MyAPP.Disconnect('{{.CommonName}}')" class="btn btn-xs btn-danger btn-flat" title="断开">X</a>
                    </td>
                </tr>
              {{end}}
            {{end}}
            </tbody>
          </table>
        </div>
        <!-- /.table-responsive -->
      {{else}}
          Fix your configuration
      {{end}}
      </div>
      <div class="box-footer clearfix">
      </div>
      <!--
      <div class="box-footer clearfix">
        <a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
        <a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
      </div>
    -->
      <!-- /.box-footer -->
    </div>
    <!-- /.box -->
  </div>
</div>
<!-- /.col -->
<!-- /.box-body -->

<div class="row">
  <div class="col-md-6 col-sm-12 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-white">
        <i class="ion ion-ios-information-empty"></i>
      </span>
      <div class="info-box-content">
      </span>
      <span class="info-box-text">
        OpenVPN 版本: <span class="info-box-number3">{{ .ovVersion }}
      </span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

  <div class="col-md-6 col-sm-12 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-white">
        <i class="ion ion-ios-gear"></i>
      </span>
      <div class="info-box-content">
        <span class="info-box-text">系统版本:</span>
        <span class="info-box-number3">{{ .sysInfo.Os }}</span>
        <span class="info-box-text">系统架构: </span>
        <span class="info-box-number3">{{ .sysInfo.Arch }} </span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

  <!-- fix for small devices only -->
  <div class="clearfix visible-sm-block"></div>
  <!-- /.col -->
</div>
<!-- /.row -->
<script>
  function Refresh() {
    window.location.reload();
  }
  setTimeout('Refresh()',10000); //1秒刷新一次
</script>
{{end}}

